<style scoped lang="scss">
.div1 {
    display: flex;

    .search1 {
        flex: 1;
    }

    .icon1 {
        font-size: 30px;
        margin: 10px;
    }
}
.dl1{
    display: flex;
    dt{
        img{
            padding: 20px;
            width: 180px;
        }
    }
    dd{
        padding:  20px 0;
        p{
            display: flex;
            justify-content: space-between;
            span{
                font-size: 12px;
            }
        }
    }
}
.p1{
    margin-top: 10px;
    display: flex;
    img{
        width: 33.3%;
        padding: 2px;
    }
}
.p2{
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    padding-top: 30px;
}
</style>
<template>
    <div>
        <div class="div1">
            <van-icon class="icon1" name="manager" @click="onicon1" />
            <van-nav-bar class="search1" title="标题" />
            <el-icon class="icon1" @click="onicon2">
                <Bell />
            </el-icon>
        </div>
        <div>
            <dl class="dl1" @click="ondetail">
                <dt>
                    <img src="../../images/2.png" alt="">
                </dt>
                <dd>
                    <span>女性朋友都注意啦！营养专家：如果不想失眠，请远离6种吃法！</span>
                    <p>
                        <span>范志红注册营养师</span>
                        <span>10分钟前</span>
                    </p>
                </dd>
            </dl>
        </div>
        <div>
            <hr>
            <span style="padding: 10px;">早上起来第一杯水喝什么？</span>
            <p class="p1">
                <img src="../../images/shui1.png" alt="">
                <img src="../../images/shui2.png" alt="">
                <img src="../../images/shui3.png" alt="">
            </p>
            <p class="p2">
                <span>慎独白衣</span>
                <span>23小时前</span>
            </p>
            <hr>
        </div>
        <div>
            <dl class="dl1">
                <dt>
                    <img src="../../images/3.png" alt="">
                </dt>
                <dd>
                    <span>吃坚果等于“喝油”，减肥期间不能吃！吓唬谁呢？</span>
                    <p style="margin-top: 30px;">
                        <span>钱多多</span>
                        <span>1天前</span>
                    </p>
                </dd>
            </dl>
            <hr>
        </div>
        <div style="width: 100%;height: 70px;border: 1px solid #ccc;">
            <span style="margin-left: 10px;">哪种油对身体有益？怎么吃最健康？</span>
            <p class="p3" style="margin: 20px 10px;font-size: 12px;display: flex;justify-content: space-between;">
                <span>心内科喵医生</span>
                <span>一周前</span>
            </p>
        </div>
        <div>
            <dl class="dl1">
                <dt>
                    <img src="../../images/4.png" alt="">
                </dt>
                <dd>
                    <span>心烦、失眠、上火...4杯暖心茶，补气清热更轻松！</span>
                    <p style="margin-top: 20px;">
                        <span>北京卫视我的大医生</span>
                        <span>2018-12-10</span>
                    </p>
                </dd>
            </dl>
            <hr>
        </div>
    </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter()
const onicon1 = () => {
    router.push('/my')
}
const onicon2 = () => {
    router.push('/information')
}
const ondetail=()=>{
    router.push('/moreDetail')
}
</script>